<script setup lang="ts">

import {useIndexHeaderContent} from "../hooks/useIndexHeaderContent.ts";
import {useRouter} from "vue-router";

const {linkList} = useIndexHeaderContent()
const router = useRouter()
const link = (name: string, title: string) => {
  router.push({name: "blogContent", query: {content: title, name: name}})
}
</script>

<template>
  <div class="demo-collapse">
    <el-collapse accordion class="header-list-size">
      <el-collapse-item name="1">
        <template #title>
          <div class="header-list-size">
            Title-Link
          </div>

        </template>
        <div>
          <el-text v-for="item in linkList" @click="link(item.name,item.url)">{{ item.title }}</el-text>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<style scoped lang="scss">
@import "style/HeaderList";
</style>
